<template>
  <div class="main">
    <img src="~/assets/baidu/bd_logo.png" alt="baiduLogo">
    <div class="search-box">
      <input type="text" v-model="text">
      <button>百度一下</button>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      text: 'search something'
    }
  },
  head: function () {
    return {
      title: '百度一下'
    }
  }
}
</script>

<style lang="less">
input, button{
  padding: 0;
  margin: 0;
  border: none;
}
  .main{
    text-align: center;
    img{
      display: block;
      width: 30%;
      margin: 50px auto;
    }
    .search-box{
      display: flex;
      width: 50%;
      text-align: right;
      border: 1px solid #333;
      margin: auto;
      input{
        flex: 2;
        width: 66%;
        border: none;
      }
    }
    button{
      flex: 1;
      width: 33%;
      border: none;
      background: #38f
    }
  }

</style>
